<!-- <template>
  <view class="payment-success-container">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-left" @click="goBack">
        <u-icon name="arrow-left" size="20" color="#333"></u-icon>
      </view>
      <view class="navbar-title">支付成功</view>
      <view class="navbar-right"></view>
    </view>

    <!-- 支付成功图标 -->
    <view class="success-icon-section">
      <view class="success-icon">
        <u-icon name="checkmark-circle-fill" size="120" color="#4caf50"></u-icon>
      </view>
      <view class="success-title">支付成功</view>
      <view class="success-subtitle">订单支付成功，商家将尽快为您发货</view>
    </view>

    <!-- 订单信息卡片 -->
    <view class="order-info-card">
      <view class="card-header">
        <u-icon name="shopping-cart" size="20" color="#ff4444"></u-icon>
        <text class="header-title">订单信息</text>
      </view>
      <view class="order-details">
        <view class="order-item">
          <text class="label">订单号</text>
          <text class="value">{{orderInfo.id}}</text>
        </view>
        <view class="order-item">
          <text class="label">支付金额</text>
          <text class="value amount">¥{{orderInfo.totalAmount}}</text>
        </view>
        <view class="order-item">
          <text class="label">支付时间</text>
          <text class="value">{{paymentTime}}</text>
        </view>
        <view class="order-item">
          <text class="label">支付方式</text>
          <text class="value">{{paymentMethod}}</text>
        </view>
      </view>
    </view>

    <!-- 商品信息卡片 -->
    <view class="goods-info-card">
      <view class="card-header">
        <u-icon name="gift" size="20" color="#ff4444"></u-icon>
        <text class="header-title">商品信息</text>
      </view>
      <view class="goods-item">
        <image class="goods-image" :src="orderInfo.goodsImage" mode="aspectFill"></image>
        <view class="goods-info">
          <view class="goods-name">{{orderInfo.goodsName}}</view>
          <view class="goods-specs">{{orderInfo.goodsSpecs}}</view>
          <view class="goods-price-count">
            <text class="goods-price">¥{{orderInfo.goodsPrice}}</text>
            <text class="goods-count">x{{orderInfo.goodsCount}}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button class="action-btn btn-primary" @click="viewOrderDetail">
        <text>查看订单</text>
      </button>
      <button class="action-btn btn-secondary" @click="goHome">
        <text>返回首页</text>
      </button>
    </view>

    <!-- 温馨提示 -->
    <view class="tips-section">
      <view class="tips-title">
        <u-icon name="info-circle" size="16" color="#ff9800"></u-icon>
        <text>温馨提示</text>
      </view>
      <view class="tips-content">
        <text>• 订单支付成功后，商家将在1-3个工作日内发货</text>
        <text>• 发货后您将收到短信通知，请注意查收</text>
        <text>• 如有疑问，请联系客服或查看订单详情</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PaymentSuccess',
  data() {
    return {
      orderInfo: {
        id: '',
        goodsImage: '',
        goodsName: '',
        goodsSpecs: '',
        goodsPrice: '0.00',
        goodsCount: 0,
        totalAmount: '0.00'
      },
      paymentTime: '',
      paymentMethod: '支付宝支付'
    }
  },
  onLoad(options) {
    // 接收从支付页面传递过来的订单信息
    if (options.orderData) {
      try {
        this.orderInfo = JSON.parse(decodeURIComponent(options.orderData));
      } catch (e) {
        console.error('解析订单数据失败:', e);
      }
    }
    
    // 如果没有传递订单数据，使用默认数据
    if (!this.orderInfo.id) {
      this.orderInfo = {
        id: '202311150001',
        goodsImage: '/static/logo.png',
        goodsName: '2023新款女装连衣裙气质显瘦',
        goodsSpecs: '颜色：蓝色；尺码：M',
        goodsPrice: '199.00',
        goodsCount: 1,
        totalAmount: '209.00'
      };
    }
    
    // 设置支付时间
    this.paymentTime = new Date().toLocaleString('zh-CN');
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    
    // 查看订单详情
    viewOrderDetail() {
      uni.navigateTo({
        url: `/pages/order/order-detail?id=${this.orderInfo.id}`
      });
    },
    
    // 返回首页
    goHome() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.payment-success-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 40rpx;
}

.custom-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #f0f0f0;
  
  .navbar-left {
    width: 60rpx;
    display: flex;
    align-items: center;
  }
  
  .navbar-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
  }
  
  .navbar-right {
    width: 60rpx;
  }
}

.success-icon-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80rpx 0;
  background-color: #ffffff;
  
  .success-icon {
    margin-bottom: 30rpx;
  }
  
  .success-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #4caf50;
    margin-bottom: 15rpx;
  }
  
  .success-subtitle {
    font-size: 28rpx;
    color: #666;
    text-align: center;
    line-height: 1.5;
  }
}

.order-info-card, .goods-info-card {
  background-color: #ffffff;
  margin: 20rpx 30rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .card-header {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    
    .header-title {
      font-size: 30rpx;
      font-weight: 500;
      color: #333;
      margin-left: 15rpx;
    }
  }
}

.order-details {
  .order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .label {
      font-size: 26rpx;
      color: #666;
    }
    
    .value {
      font-size: 26rpx;
      color: #333;
      
      &.amount {
        color: #ff4444;
        font-weight: 500;
      }
    }
  }
}

.goods-item {
  display: flex;
  padding: 20rpx 0;
  
  .goods-image {
    width: 160rpx;
    height: 160rpx;
    border-radius: 8rpx;
    background-color: #f5f5f5;
    flex-shrink: 0;
  }
  
  .goods-info {
    flex: 1;
    margin-left: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    .goods-name {
      font-size: 28rpx;
      color: #333;
      line-height: 1.4;
      margin-bottom: 10rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    
    .goods-specs {
      font-size: 24rpx;
      color: #999;
      margin-bottom: 10rpx;
    }
    
    .goods-price-count {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .goods-price {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
      }
      
      .goods-count {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

.action-buttons {
  display: flex;
  gap: 20rpx;
  padding: 40rpx 30rpx;
  
  .action-btn {
    flex: 1;
    height: 80rpx;
    border: none;
    border-radius: 40rpx;
    font-size: 28rpx;
    font-weight: 500;
    
    &.btn-primary {
      background-color: #ff4444;
      color: #ffffff;
    }
    
    &.btn-secondary {
      background-color: #ffffff;
      color: #666666;
      border: 1rpx solid #dddddd;
    }
  }
}

.tips-section {
  margin: 0 30rpx;
  padding: 30rpx;
  background-color: #fff7e6;
  border-radius: 16rpx;
  border: 1rpx solid #ffeaa7;
  
  .tips-title {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    text {
      font-size: 28rpx;
      font-weight: 500;
      color: #ff9800;
      margin-left: 10rpx;
    }
  }
  
  .tips-content {
    display: flex;
    flex-direction: column;
    gap: 10rpx;
    
    text {
      font-size: 24rpx;
      color: #ff9800;
      line-height: 1.5;
    }
  }
}
</style -->>
<template>
  <view class="payment-success-container">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-left" @click="goBack">
        <u-icon name="arrow-left" size="20" color="#333"></u-icon>
      </view>
      <view class="navbar-title">支付成功</view>
      <view class="navbar-right"></view>
    </view>

    <!-- 支付成功图标 -->
    <view class="success-icon-section">
      <view class="success-icon">
        <u-icon name="checkmark-circle-fill" size="120" color="#4caf50"></u-icon>
      </view>
      <view class="success-title">支付成功</view>
      <view class="success-subtitle">订单支付成功，商家将尽快为您发货</view>
    </view>

    <!-- 订单信息卡片 -->
    <view class="order-info-card">
      <view class="card-header">
        <u-icon name="shopping-cart" size="20" color="#ff4444"></u-icon>
        <text class="header-title">订单信息</text>
      </view>
      <view class="order-details">
        <view class="order-item">
          <text class="label">订单号</text>
          <text class="value">{{orderInfo.id}}</text>
        </view>
        <view class="order-item">
          <text class="label">支付金额</text>
          <text class="value amount">¥{{orderInfo.totalAmount}}</text>
        </view>
        <view class="order-item">
          <text class="label">支付时间</text>
          <text class="value">{{paymentTime}}</text>
        </view>
        <view class="order-item">
          <text class="label">支付方式</text>
          <text class="value">{{paymentMethod}}</text>
        </view>
      </view>
    </view>

    <!-- 商品信息卡片 -->
    <view class="goods-info-card">
      <view class="card-header">
        <u-icon name="gift" size="20" color="#ff4444"></u-icon>
        <text class="header-title">商品信息</text>
      </view>
      <view class="goods-item">
        <image class="goods-image" :src="orderInfo.goodsImage" mode="aspectFill"></image>
        <view class="goods-info">
          <view class="goods-name">{{orderInfo.goodsName}}</view>
          <view class="goods-specs">{{orderInfo.goodsSpecs}}</view>
          <view class="goods-price-count">
            <text class="goods-price">¥{{orderInfo.goodsPrice}}</text>
            <text class="goods-count">x{{orderInfo.goodsCount}}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button class="action-btn btn-primary" @click="viewOrderDetail">
        <text>查看订单</text>
      </button>
      <button class="action-btn btn-secondary" @click="goHome">
        <text>返回首页</text>
      </button>
    </view>

    <!-- 温馨提示 -->
    <view class="tips-section">
      <view class="tips-title">
        <u-icon name="info-circle" size="16" color="#ff9800"></u-icon>
        <text>温馨提示</text>
      </view>
      <view class="tips-content">
        <text>• 订单支付成功后，商家将在1-3个工作日内发货</text>
        <text>• 发货后您将收到短信通知，请注意查收</text>
        <text>• 如有疑问，请联系客服或查看订单详情</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PaymentSuccess',
  data() {
    return {
      orderInfo: {
        id: '',
        goodsImage: '',
        goodsName: '',
        goodsSpecs: '',
        goodsPrice: '0.00',
        goodsCount: 0,
        totalAmount: '0.00'
      },
      paymentTime: '',
      paymentMethod: '支付宝支付'
    }
  },
  onLoad(options) {
    // 接收从支付页面传递过来的订单信息
    if (options.orderData) {
      try {
        this.orderInfo = JSON.parse(decodeURIComponent(options.orderData));
      } catch (e) {
        console.error('解析订单数据失败:', e);
      }
    }
    
    // 如果没有传递订单数据，使用默认数据
    if (!this.orderInfo.id) {
      this.orderInfo = {
        id: '202311150001',
        goodsImage: '/static/logo.png',
        goodsName: '2023新款女装连衣裙气质显瘦',
        goodsSpecs: '颜色：蓝色；尺码：M',
        goodsPrice: '199.00',
        goodsCount: 1,
        totalAmount: '209.00'
      };
    }
    
    // 设置支付时间
    this.paymentTime = new Date().toLocaleString('zh-CN');
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    
    // 查看订单详情
    viewOrderDetail() {
      uni.navigateTo({
        url: `/pages/order/order-detail?id=${this.orderInfo.id}`
      });
    },
    
    // 返回首页
    goHome() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.payment-success-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 40rpx;
}

.custom-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #f0f0f0;
  
  .navbar-left {
    width: 60rpx;
    display: flex;
    align-items: center;
  }
  
  .navbar-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
  }
  
  .navbar-right {
    width: 60rpx;
  }
}

.success-icon-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80rpx 0;
  background-color: #ffffff;
  
  .success-icon {
    margin-bottom: 30rpx;
  }
  
  .success-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #4caf50;
    margin-bottom: 15rpx;
  }
  
  .success-subtitle {
    font-size: 28rpx;
    color: #666;
    text-align: center;
    line-height: 1.5;
  }
}

.order-info-card, .goods-info-card {
  background-color: #ffffff;
  margin: 20rpx 30rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .card-header {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    
    .header-title {
      font-size: 30rpx;
      font-weight: 500;
      color: #333;
      margin-left: 15rpx;
    }
  }
}

.order-details {
  .order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .label {
      font-size: 26rpx;
      color: #666;
    }
    
    .value {
      font-size: 26rpx;
      color: #333;
      
      &.amount {
        color: #ff4444;
        font-weight: 500;
      }
    }
  }
}

.goods-item {
  display: flex;
  padding: 20rpx 0;
  
  .goods-image {
    width: 160rpx;
    height: 160rpx;
    border-radius: 8rpx;
    background-color: #f5f5f5;
    flex-shrink: 0;
  }
  
  .goods-info {
    flex: 1;
    margin-left: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    .goods-name {
      font-size: 28rpx;
      color: #333;
      line-height: 1.4;
      margin-bottom: 10rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    
    .goods-specs {
      font-size: 24rpx;
      color: #999;
      margin-bottom: 10rpx;
    }
    
    .goods-price-count {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .goods-price {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
      }
      
      .goods-count {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

.action-buttons {
  display: flex;
  gap: 20rpx;
  padding: 40rpx 30rpx;
  
  .action-btn {
    flex: 1;
    height: 80rpx;
    border: none;
    border-radius: 40rpx;
    font-size: 28rpx;
    font-weight: 500;
    
    &.btn-primary {
      background-color: #ff4444;
      color: #ffffff;
    }
    
    &.btn-secondary {
      background-color: #ffffff;
      color: #666666;
      border: 1rpx solid #dddddd;
    }
  }
}

.tips-section {
  margin: 0 30rpx;
  padding: 30rpx;
  background-color: #fff7e6;
  border-radius: 16rpx;
  border: 1rpx solid #ffeaa7;
  
  .tips-title {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    text {
      font-size: 28rpx;
      font-weight: 500;
      color: #ff9800;
      margin-left: 10rpx;
    }
  }
  
  .tips-content {
    display: flex;
    flex-direction: column;
    gap: 10rpx;
    
    text {
      font-size: 24rpx;
      color: #ff9800;
      line-height: 1.5;
    }
  }
}
</style>
